<template>
  <view class="login-form">
    <!-- 账号密码登录 -->
    <view v-if="loginMode === '01'">
      <view class="input-wrap">
        <uni-icons class="paw"
                   type="contact-filled"
                   color="rgb(33,158,76)"
                   size="30"></uni-icons>
        <input type="text"
               placeholder-style="color:#A3A3A3"
               v-model="loginForm.phone"
               placeholder="请输入账号" />
      </view>
      <view class="input-wrap">
        <uni-icons class="paw"
                   type="locked-filled"
                   color="rgb(33,158,76)"
                   size="30"></uni-icons>
        <input type="text"
               maxlength="20"
               :password="showPassword"
               placeholder-style="color:#A3A3A3"
               v-model="loginForm.password"
               placeholder="请输入账号密码" />
        <uni-icons v-if="showPassword"
                   @tap="showPassword=false"
                   class="paw-close"
                   type="eye-slash-filled"
                   color="#888"
                   size="24"></uni-icons>
        <uni-icons v-else
                   @tap="showPassword=true"
                   class="paw-close"
                   type="eye-filled"
                   color="#888"
                   size="24"></uni-icons>
      </view>
    </view>
    <view :class="['longin-btn', loginDisabled ? '' : 'longin-disabled']"
          @tap="login">登 录</view>
  </view>
</template>

<script>
export default {
  name: 'AccountLogin',
  props: {
    loginMode: { //登录的方式
      type: String,
      default: '01'
    },
  },
  mounted () {
    if (uni.getStorageSync('accountPassword')) {
      const accountPassword = JSON.parse(uni.getStorageSync('accountPassword'));
      this.loginForm.phone = accountPassword.phone;
      this.loginForm.password = accountPassword.password;
    }
  },
  computed: {
    localPicture () {
      return this.$localPicture
    }
  },
  data () {
    return {
      // 登录表单数据
      loginForm: {
        phone: '',
        password: '',
        code: ''
      },
      // 登录按钮是否可点击
      loginDisabled: false,
      // 密码显示
      showPassword: true,
      timer: null,
      disabled: true,
      codeStr: '获取验证码'
    }
  },
  watch: {
    loginForm: {
      handler (newValue) {
        (newValue.phone.length > 0 && newValue.password.length > 0) ? this.loginDisabled = true : this
          .loginDisabled = false
      },
      deep: true
    }
  },
  onUnload () {
    if (this.tiemr) clearInterval(this.tiemr);
  },
  methods: {
    // 登录
    async login () {
      if (!this.loginDisabled) return
      const parmse = {
        ...this.loginForm,
        password: this.loginForm.password
      }
      const res = await this.$api.userServer.loginUserAccount(parmse);
      if (res.code !== '200') return
      // 存起token
      this.$store.commit('setToken', res.data.token);
      // 存用户的信息
      uni.setStorageSync("userAccountInfo", JSON.stringify(res.data.respUserAccountInfo));
      uni.showToast({
        title: "登录成功",
        duration: 2000,
      });
      // 本地存一下密码  下次过来的时候  好记住
      if (this.loginMode === '01') {
        uni.setStorageSync('accountPassword', JSON.stringify(this.loginForm))
      }
      uni.reLaunch({
        url: '/pages/home/index',
      });
    },
    // 查看密码
    changeLookPassword () {
      this.showPassword = !this.showPassword;
    }
  }
}
</script>

<style lang="scss">
.login-container-page {
  width: 100vw;
  height: 100vh;

  .back-home-box {
    position: fixed;
    top: 32rpx;
    right: 32rpx;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    z-index: 3333;

    image {
      height: 48rpx;
      width: 48rpx;
      margin-right: 8rpx;
    }
  }

  .login-head-desc {
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo {
      position: absolute;
      right: 0;
      top: 0;
      width: 412rpx;
      height: 548rpx;
      vertical-align: middle;
      margin-left: auto;
    }
  }

  .container-main {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    z-index: 5;
  }

  .login-head-title {
    color: $uni-color-success;
    font-size: 24rpx;
    font-weight: 500;
    padding: 98rpx 0 46rpx 0;

    .second-level {
      color: #333;
      font-size: 28rpx;
      margin-top: 16rpx;
    }
  }

  // tabs
  /deep/ .u-tabs__wrapper__nav {
    margin-left: -11px;

    &__item {
      position: relative;

      &:first-child::before {
        content: "";
        position: absolute;
        right: 0;
        width: 2rpx;
        height: 30rpx;
        background-color: #e7e7e7;
      }
    }

    &__item__text {
      font-size: 32rpx;
    }
  }

  .login-tabs {
    width: 330rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .swiper-tab-list {
    display: inline-block;
    color: #666;
    line-height: 80rpx;
    font-size: 32rpx;
    position: relative;

    &:first-child::before {
      content: "";
      position: absolute;
      top: 26rpx;
      right: -22rpx;
      width: 2rpx;
      height: 30rpx;
      background-color: #e7e7e7;
    }

    &.active {
      color: $uni-color-success;
      font-weight: bold;
    }
  }

  .active .swiper-tab-line {
    border-bottom: 4rpx solid $uni-color-success;
  }

  .agreement {
    margin-top: 128rpx;
    text-align: left;

    .text {
      font-size: 24rpx;
      color: $uni-color-success !important;
      line-height: 1;
    }
  }

  .interval {
    margin-top: 188rpx;
  }

  .input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid $uni-color-success;
    margin-top: 50rpx;
    padding: 10rpx 0 10rpx 16rpx;

    .area-code {
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      .line {
        color: #b9b8b6;
        margin: 0 20rpx 0 0;
      }
    }

    image {
      width: 64rpx;
      height: 64rpx;
      margin-right: 16rpx;
      vertical-align: middle;
    }

    input {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
    .paw {
      margin-right: 24rpx;
    }

    .paw-close {
      margin-left: auto;
      margin-right: 0;
    }

    .code-btn {
      font-size: 28rpx;
      color: #fd4723;
      margin-left: auto;
    }
  }

  .forget-password {
    display: flex;
    justify-content: flex-end;
    margin-top: 26rpx;
    font-size: 28rpx;
    color: #333;
  }

  .longin-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 1000rpx;
    text-align: center;
    color: #fff;
    margin-top: 126rpx;
    background: $uni-color-success;

    &.longin-disabled {
      background: rgba(33, 158, 76, 0.3);
    }
  }

  .account-tips {
    font-size: 28rpx;
    color: #666;
    margin-top: 16rpx;

    .no-account {
      display: flex;
      justify-content: center;

      view {
        color: $uni-color-success;
      }
    }
  }
}

.login-form {
  position: relative;
}

.code-input {
  margin: auto;
  width: 650rpx;
  height: 100rpx;
  display: flex;
}

.code-input > view {
  margin-top: 5rpx;
  margin-left: 15rpx;
  width: 86rpx;
  height: 86rpx;
  line-height: 86rpx;
  font-size: 60rpx;
  font-weight: bold;
  color: #313131;
  text-align: center;
}

.code-input > view:nth-child(1) {
  margin-left: 0rpx;
}

.cinput {
  position: fixed;
  left: -100rpx;
  width: 50rpx;
  height: 50rpx;
}
</style>